<template>
  <div>
    <h3>热门分享</h3>
    <div class="card" v-for="item in moments">
      <Momment :moment="item"></Momment>
      <MommentOption :id="item.id" :item="item"
                     @Collection=""
                     @Repost=""
                     @Comment=""
                     @Like=""
      ></MommentOption>
    </div>
  </div>
</template>
<script>
  import Momment from '@/components/post/moment'
  import MommentOption from '@/components/post/moment-option'
  import Bus from '../../bus/bus'
  import { getHotPost } from '@/public/api'

  export default {
    components: {Momment, MommentOption},
    data () {
      return {
        currentPage: '',
        hasMore: false,
        size: 7,
        moments: []
      }
    },
    methods: {
      Init (isLoadMore = false, page = 1) {
        getHotPost({
          page: page,
          size: this.size
        }).then(data => {
          if (data.status) {
            let arr = data.data
            if (isLoadMore) this.moments.length = 0
            for (let i = 0; i < arr.length; i++) {
              this.moments.push({
                id: arr[i].id,
                content: arr[i].content,
                update_time: arr[i].created_at,
                user_id: arr[i].user_id,
                name: arr[i].userbasic.name,
                Images: arr[i].images,
                avatar: arr[i].userbasic.avatar,
                vote: arr[i].vote.some((item, index, array) => {
                  return item.user_id + '' === this.User_id
                }),
                collect: arr[i].collect.some((item, index, array) => {
                  return item.user_id + '' === this.User_id
                }),
                collect_size: arr[i].collect.length,
                vote_size: arr[i].vote.length
              })
            }
            this.currentPage = data.page
            this.hasMore = data.hasMore
          }
          console.log(data)
        }).catch(message => {
          console.log(message)
        })
      },
      loadMore () {
        if (!this.hasMore) {
          console.log('没有啦')
          return
        }
        this.currentPage++
        this.Init(false, this.currentPage)
      }
    },
    mounted () {
      this.Init()
      Bus.$on('loadMore', () => {
        this.loadMore()
      })
    },
    beforeDestroy () {
      Bus.$off('loadMore')
    },
    watch: {
      User_id (curVal, oldVal) {
        this.Init()
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>
<style>
  .card {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    background: #fff;
    text-align: left;
  }

  h3 {
    text-align: center;
  }
</style>
